<template>
  <view class="content"  @click="showPopup=true" >
    <view class="rule-box" @click="goToRule"></view>
    <view class="phone-box-icon" @click="callPhone">
        <image class="phone-icon" :src="customerService"></image>
      </view>
      <view class="phone-box" @click="callPhone">联系客服</view>
    

    <!-- 验证码弹出层 showPopup-->
    <view class="popup-mask" v-if="showPopup" @click.stop="handleCancel">
      <view class="popup-content" @click.stop>
        <!-- <view class="popup-close" @click="handleCancel">×</view> -->
        <view class="popup-title">请输入{{ inputPhone ? '手机号' : '兑换验证码' }}</view>
        <view class="popup-tips">
          <view>支付立减</view>
          <view class="tips">
            <text style="color: #000;font-size: 36rpx;margin-right: 10rpx;">￥<text
                style="font-size: 60rpx;">20.00</text></text>最高
          </view>
        </view>
        <view class="popup-input-box" v-if="!inputPhone">
          <!-- focus="true" 去掉自动聚焦 -->
          <input type="number" v-model="smsCode" placeholder="请输入6位短信验证码" class="popup-input" maxlength="6" 
            @input="handleSmsCodeInput" />
          <view class="countdown" @click="handleResendCode">
            {{ countdownText }}
          </view>
        </view>
        <view class="popup-input-box" v-else>
          <input type="number" v-model="phone" placeholder="请输入手机号" class="phone-input" maxlength="11"
          @input="handleInput" />
        </view>
        <view class="wx-tips">
          <image src="/static/wxPay.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"></image>
          <text>兑换后直接到账微信</text>
        </view>

        <!-- <view class="popup-btns">
          <view class="popup-btn confirm" @click="handleConfirmFn">确定</view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { register, login, getSessionId, getPoints, sendBindCode, bindAccount, getOpenIds, blockPhone, addPhone, checkPhone, getIp,errorPhone,uptotwo,addotherphone,getPic } from '@/api/points'
import w_md5 from '@/js_sdk/zww-md5/w_md5.js'
import { wxConfig } from '@/config/index'
import customerService from '@/static/customerService.svg'

export default {
  data() {
    return {
      phone: '',
      amount: 20,
      statusBarHeight: 0,
      // isAgree: false,
      // 默认改为true 老板说不要下面的勾选了
      isAgree: true,
      smsCode: '', // 验证码
      bindAccountData: null, // 存储bindAccount返回的数据
      showPopup: true, // 控制弹出层显示
      countdown: 60, // 倒计时秒数
      countdownText: '重新获取', // 倒计时文本
      timer: null, // 定时器
      customerService: customerService,
      gsd: '',
      ip: '',
      isYidong: false,
      isp: '',
      isExchanging: false, // 添加兑换状态标志
      inputPhone: true,
      exchangeTimer: null, // 添加防抖计时器
      sourceUrl: '',// 渠道地址
      mt:'',
      
    }
  },
  onLoad() {
    // 获取系统状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    this.getIpFn()

    // this.getOpenId()
    this.getCode()
    // this.getPicFn()
  },
  methods: {
    // 获取源地址和mt
    getPicFn() {
      return
      let params = this.getUrlParam('bs')
      console.log('params', params);
      
				if (params) {
					getPic({
						bs: params
					}).then(res => {
						this.sourceUrl = res.data[0].url
						this.mt = res.data[0].mt
						uni.setStorageSync('route', this.sourceUrl)
						uni.setStorageSync('mt', this.mt)
					})
				} 
			},
    //获取ip
    async getIpFn() {
      let res = await getIp()
      this.ip = res.data
      uni.setStorageSync('IP', this.ip)

    },
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: '0571-86028127'
      })
    },
    /* getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r =  window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    }, */
    getUrlParam(name) {
      // 获取完整的URL的查询参数部分
      const searchParams = new URLSearchParams(window.location.search)
      const hashParams = new URLSearchParams(window.location.hash.split('?')[1] || '')
      
      // 优先从 search 中获取，没有则从 hash 中获取
      return searchParams.get(name) || hashParams.get(name) || null
    },
    // 获取code
    getCode() {
	
	
      // if (uni.getStorageSync("openId") && uni.getStorageSync("openId") != "undefined") {
      //   return false;
      // }
      var code = this.getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      var local = window.location.href;
      const appId = wxConfig.appId

      if (code == null || code === '') {
        // 测试 
        return
        // window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=#wechat_redirect'
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
      } else {
        this.getOpenId(code) //把code传给后台获取用户信息
      }
    },

    async getOpenId(code) {
      // const code = this.getUrlParam('code'); // 截取路径中的code
      console.log('code', code);
      if (code) {
        const params = {
          appid: wxConfig.appId,
          secret: wxConfig.appSecret,
          code: code,
          grant_type: 'authorization_code'
        }
        let res = await getOpenIds(params)
		console.log(res)
        if (res.openid) {
          uni.setStorageSync('openId', res.openid)
		  
          // uni.setStorageSync('accessToken', res.data.access_token)
        } else {
          uni.showToast({
            title: '获取openId失败:' + res.errcode,
            icon: 'none'
          })
        }
        console.log('res', res);

        // 请求获取 access_token

      }
    },
    // 阻止电话号码
    async blockPhone() {
      const params = {
        phone: this.phone
      }
      let res = await blockPhone(params)
      if (res.data == 1) {
        uni.showToast({
          title: '登录失败',
          icon: 'none'
        })
        return false
      } else {
        return true
      }
    },
    // 验证手机号
    async validatePhone() {
      const phoneReg = /^1[3-9]\d{9}$/
      if (!this.phone) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return false
      }
      if (!phoneReg.test(this.phone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return false
      }
      // if (!await this.blockPhone()) {
      //   return false
      // }
      uni.setStorageSync('phone', this.phone)
      return true
    },
    handleInput(e) {
      if (this.phone == '13733333333') {
        this.showPopup = true
        this.inputPhone = false
        this.startCountdown()
        return
      }
      if (e.detail.value.length == 11) {
        this.handleExchange()
      }
    },

    // 处理兑换
    async handleExchange() {
      // 如果正在兑换中，直接返回
      if (this.isExchanging) {
        return
      }

      if (!await this.validatePhone()) return

      try {
        this.isExchanging = true // 设置兑换状态为true
        uni.showLoading({
          title: '兑换中...'
        })
        const res = await this.handleRegister()

        uni.hideLoading()
      } catch (error) {
        console.log('error', error);
        uni.hideLoading()
        uni.showToast({
          title: error.msg || '兑换失败',
          icon: 'none'
        })
      } finally {
        this.isExchanging = false // 无论成功失败，都重置兑换状态
      }
    },
    handleAgree() {
      this.isAgree = !this.isAgree
    },
    // 生成随机字符串
    generateRandomString(length) {
      const chars = 'abcdefghijklmnopqrstuvwxyz'
      let result = ''
      for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length))
      }
      return result
    },

    // 调用登记接口
    async handleRegister() {
		// await this.handleCheckPhone()
		// if (!this.isYidong) {
		//   // 添加非移动手机号
		  
		//   return uni.showToast({
		//     title: '仅限中国移动用户参与！',
		//     icon: 'none'
		//   })
		// }
		
		this.getFingerprint(fp => {
				//这里调用获取指纹
				
				this.bsk=fp.e
				this.inputItem=fp.f
				this.duid = document.cookie.replace(/(?:(?:^|.*;\s*)BSFIT_DFPUUID\s*\=\s*([^;]*).*$)|^.*$/, "$1")  
				console.log(fp)
				console.log(this.duid)
				let that=this
				let openid=uni.getStorageSync("openId");
				uni.request({
					url:'https://mh.yxhyd.cn/upstream/index/captcha',
					data:{
						bsk:this.bsk,
						inputItem:this.inputItem,
						duid:this.duid,
						phone:this.phone,
						openid:openid
					},
					success: (res) => {
						uni.setStorageSync('id', res.data.data)
					        that.inputPhone = false
					        that.startCountdown()
					    }
				})
			})
		
      
    },
    // 添加非移动手机号
    async addOtherPhoneFn() {
      let params = {
        phone: this.phone,
        gsd: this.isp
      }
      await addotherphone(params)
    },
getFingerprint(c) {
				var bsdfp = new BSDeviceFingerprint();
				var a = { extendFields: [] };
				bsdfp.getCollectElements(a, function (a) {
					var b = bsdfp;
					var dd = b.getSendString(a);
					var aa = b.getEncryptKey();
					var sm4 = new SM4();
					var d = sm4.Sb(dd, aa.substring(0, 16), aa.substring(16));
			
					c({ "e": aa, "f": d })
				});
			},
    async loginFn() {
      const params = { channelId: "968886", password: "erh8513et1" }
      const res = await login(params)
      if (res.code === '000000') {
        // 保存token相关信息
        uni.setStorageSync('token', res.data.token)
        uni.setStorageSync('refreshToken', res.data.refreshToken)
        uni.setStorageSync('tokenHead', res.data.tokenHead)
        uni.setStorageSync('expiresIn', res.data.expiresIn)
        console.log('登录成功', res)
      } else {
        uni.showToast({
          title: res.mesg || '登录失败',
          icon: 'none'
        })
      }
    },

    // 获取 sessionId
    async getSessionIdFn(myOrderId) {
      try {
        const params = {
          myOrderId: myOrderId
        }
        const res = await getSessionId(params)
        if (res.code === '000000' && res.data) {
          uni.setStorageSync('sessionId', res.data)
          console.log('获取 sessionId 成功：', res)
          // 获取sessionId成功后查询积分
          await this.queryPoints()
        } else {
          console.error('获取 sessionId 失败：', res)
        }
      } catch (error) {
        console.error('获取 sessionId 出错：', error)
      }
    },

    // 查询积分方法
    async queryPoints() {
      try {
        const myOrderId = uni.getStorageSync('myOrderId')
        const sessionId = uni.getStorageSync('sessionId')
        const blackbox = uni.getStorageSync('blackbox')

        if (!blackbox) {
          console.error('未获取到设备指纹')
          return
        }

        const params = {
          fingerprint: blackbox,
          myOrderId: myOrderId,
          ip: uni.getStorageSync('IP'),
          port: 0,
          sessionId: sessionId
        }

        const res = await getPoints(params)
        if (res.code === '000000') {
          // 存储积分到本地
          // 检查绑定状态
          if (res.data && res.data.cmcc && res.data.cmcc.bindStatus == 1 && res.data.cmcc.lmPoints) {
            uni.setStorageSync('lmPoints', res.data.cmcc.lmPoints)
            if (res.data.cmcc.lmPoints < 240) {
              this.errorPhoneFn('积分不足')
            }
            // 已绑定，跳转到exchange页面
            uni.redirectTo({
              url: '/pages/exchange/exchange'
            })
          }
          /* else if (!res.data.cmcc.lmPoints) {
            this.errorPhoneFn('积分不足')
          }  */
          else {
            // 未绑定或cmcc为null，发送验证码
            await this.handleSendBindCode()
          }
        } else {
          // 未绑定或cmcc为null，发送验证码
          await this.handleSendBindCode()
          console.error('查询积分失败：', res)
        }
      } catch (error) {
        console.error('查询积分出错：', error)
        // 未绑定或cmcc为null，发送验证码
        await this.handleSendBindCode()
        uni.showToast({
          title: error.mesg || '查询积分出错',
          icon: 'none'
        })
      }
    },

    // 发送绑定验证码
    async handleSendBindCode() {
      try {
        const myOrderId = uni.getStorageSync('myOrderId')
        const params = {
          myOrderId: myOrderId,
          ip: uni.getStorageSync('IP')
        }

        const res = await sendBindCode(params)
        if (res.code === '000000') {
          // 显示验证码输入弹出层
          this.inputPhone = false
          // 开始倒计时
          this.startCountdown()
        } else if (res.code === '1114') {
          await this.queryPoints()
        }
        else {
          uni.showToast({
            title: res.msg || '发送验证码失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('发送验证码出错：', error)
        uni.showToast({
          title: error.data || '发送验证码失败',
          icon: 'none'
        })
      }
    },
    // 未下单错误原因
    async errorPhoneFn(yy) {
      const params = {
        phone: uni.getStorageSync('phone'),
        yy: yy
      }
      const res = await errorPhone(params)
      console.log('未下单错误原因：', res)
    },

    // 开始倒计时
    startCountdown() {
      uni.showToast({
            title: '6位验证码已发送，请输入',
            icon: 'success'
          })
      this.countdown = 60
      this.countdownText = `${this.countdown}s`
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--
          this.countdownText = `${this.countdown}s`
        } else {
          clearInterval(this.timer)
          this.countdownText = '重新获取'
        }
      }, 1000)
    },

    // 重新获取验证码
    async handleResendCode() {
      if (this.countdown > 0) return
      await this.handleRegister()
    },

    // 取消按钮处理
    handleCancel() {
      /* if (this.timer) {
        clearInterval(this.timer)
      } */
      // 添加关闭动画
      const popupMask = document.querySelector('.popup-mask')
      const popupContent = document.querySelector('.popup-content')
      if (popupMask && popupContent) {
        popupMask.classList.add('hide')
        popupContent.classList.add('hide')
      } 
      setTimeout(()=>{
        this.showPopup = false
      },100)
    },
    // 点击弹窗的确定按钮
    async handleConfirmFn(){
      if (this.inputPhone) {
        await this.handleExchange()
      }else{
        await this.handleConfirm()
      }
    },

    //  验证码确认按钮处理
    async handleConfirm() {
      if (!this.smsCode) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none'
        })
        return
      }
      if (this.smsCode.length !==6) {
        uni.showToast({
          title: '请输入6位验证码',
          icon: 'none'
        })
        return
      }
      if (this.smsCode == '333333') {
        this.showPopup = false
        this.smsCode = ''
        this.countdown = 60
        this.countdownText = '重新获取'
        uni.redirectTo({
          url: '/pages/exchange/exchange'
        })
        return
      }
let id_now=uni.getStorageSync('id')
uni.request({
	url:"https://mh.yxhyd.cn/upstream/index/login",
	
	data:{
		id:id_now,
		code:this.smsCode
	},
	success(res) {
		if(res.data.code=='200'){
			uni.setStorageSync('sum',res.data.data.point.sum)
			uni.setStorageSync('count',res.data.data.point.count)
			uni.redirectTo({
			  url: '/pages/exchange/exchange'
			})
		}else{
			uni.showToast({
			  title: '验证码错误',
			  icon: 'none'
			})
		}
		
		
	}
})
		this.showPopup = false
        this.smsCode = ''
        this.countdown = 60
        this.countdownText = '重新获取'
      
    },
    //新用户输入验证码并且跳转到第二页时调用接口
    async newuserConfirm() {
      await uptotwo({ phone: this.phone })
    },

    goToRule() {
      uni.navigateTo({
        url: '/pages/rule/rule'
      })
    },
    goToAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/agreement'
      })
    },
    handleSmsCodeInput(e) {
      if (this.smsCode.length === 6) {
        this.handleConfirm()
      }
    },
    // 添加手机号
    async handleAddPhone() {
      const params = {
        phone: this.phone,
        gsd: this.gsd,
        /* mt:this.mt,
        dyurl:this.sourceUrl */
        mt:uni.getStorageSync('mt'),
        dyurl:uni.getStorageSync('route')
      }
      const res = await addPhone(params)
      console.log('添加手机号：', res)

    },
    // 查询手机归属地
    async handleCheckPhone() {
      const params = {
        myOrderId: uni.getStorageSync('myOrderId')
      }
      const res = await checkPhone(params)
      if (res.code === '000000') {
        this.gsd = res.data.province + res.data.city
        this.isp = res.data.isp
        this.isYidong = res.data.isp == '中国移动'
      }
      console.log('查询手机归属地：', res)
    }
  },


  // 组件销毁时清除定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
@font-face {
  font-family: 'ZiZhiQuXiMaiTi';
  src: url('/static/ZiZhiQuXiMaiTi-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

page {
  height: 100%;
  overflow: hidden;
}

.content {
  min-height: 100vh;
  height: 100vh;
  /* background-image: url('/static/indexBg.png'); */
  background-image: url('https://mhkj001.oss-rg-china-mainland.aliyuncs.com/index_image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250416225224.png');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding-top: var(--status-bar-height);
  position: relative;
  overflow-y: auto;
}

.rule-box {
  position: absolute;
  font-size: 24rpx;
  top:250rpx;
  right: 0;
  width: 30rpx;
  height: 150rpx;
  text-align: center;
  color: #FFFFFF;
  /* background-color: #f36839; */
  border-radius: 10rpx 0 0 10rpx;
  z-index: 100;
  cursor: pointer;
  writing-mode: vertical-lr;
  letter-spacing: 4rpx;
  padding: 10rpx;
}

.phone-box-icon {
  position: absolute;
  top: 320rpx;
  left: 15rpx;
  width: 80rpx;
  height: 85rpx;
  /* background-color: rgba(255, 255, 255, 0.8); */
  background-image: url('/static/customerBox.png');
  background-size: 100% 100%;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20rpx;
  padding: 10rpx;
  z-index: 100;
}

.phone-icon {
  width: 80rpx;
  height: 80rpx;
  z-index: 100;
}

.phone-box {
  position: absolute;
  font-size: 24rpx;
  top: 425rpx;
  left: 10rpx;
  width: 100rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  color: #186133;
  font-weight: 600;
  background-color: #fff;
  border-radius: 10rpx;
  z-index: 100;
  cursor: pointer;
  padding: 4rpx;
}

.container {
  width: 100%;
  /* min-height: calc(100% - var(--status-bar-height)); */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40rpx 40rpx;
  box-sizing: border-box;
  position: relative;
}

.title {
  font-family: ZiZhiQuXiMaiTi !important;
  font-size: 96rpx;
  color: #FFFFFF;
  margin-bottom: 30rpx;
  font-weight: normal;
  text-align: center;
  margin-top: 120rpx;
}

.subtitle {
  display: flex;
  gap: 20rpx;
  margin-bottom: 100rpx;
  color: #FFFFFF;
  font-size: 28rpx;
  border-bottom: 2rpx solid #FFFFFF;
  padding-left: 20rpx;
}

.subtitle-item1 {
  padding-bottom: 20rpx;
}

.subtitle-item2 {
  padding-right: 10rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #FFFFFF;

}



.card {
  width: 650rpx;
  height: 380rpx;
  background-image: url('/static/contentBg.png');
  background-size: 100% 100%;
  background-position: center;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/static/contentBg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 490rpx;
  /* justify-content: space-between; */
  padding-top: 20rpx;
}

.card-content-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-left: 40rpx;
}

.card-content-left {
  position: relative;
  display: flex;
  align-items: baseline;
}

.amount-text {
  font-size: 48rpx;
  color: #fff;
  font-weight: 500;
  margin-right: 10rpx;
}

.amount {
  font-size: 92rpx;
  color: #fff;
  font-weight: 500;
}

.expected-text {
  position: absolute;
  top: -10rpx;
  right: -16rpx;
  font-size: 22rpx;
  color: #FFFFFF;
  font-weight: 400;
}

.content-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 30rpx;
}

.card-text {
  font-size: 48rpx;
  color: #fff;
  margin-bottom: 10rpx;
}

.card-desc {
  font-size: 22rpx;
  color: #fff;
}

.input-box {
  width: 620rpx;
  height: 100rpx;
  background-image: url('/static/inputBg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.phone-input {
  width: 100%;
  height: 80rpx;
  color: #333333;
  font-size: 32rpx;
  text-align: center;
}

/* 修改 placeholder 样式 */
.phone-input::-webkit-input-placeholder {
  font-weight: 400;
  font-size: 28rpx;
  color: #94E3B1;
  text-align: center;
}

.phone-input:-moz-placeholder {
  font-weight: 400;
  font-size: 28rpx;
  color: #94E3B1;
  text-align: center;
}

.phone-input::-moz-placeholder {
  font-weight: 400;
  font-size: 28rpx;
  color: #94E3B1;
  text-align: center;
}

.phone-input:-ms-input-placeholder {
  font-weight: 400;
  font-size: 28rpx;
  color: #94E3B1;
  text-align: center;
}

.exchange-btn {
  width: 620rpx;
  height: 100rpx;
  background: #FF6B35;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 36rpx;
  margin-bottom: 30rpx;
}

.agreement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
  margin-top: 60rpx;
  margin-bottom: 40rpx;
}

.agreement-content {
  display: flex;
  align-items: center;
  gap: 8rpx;
}


.checkbox .uni-checkbox-wrapper .uni-checkbox-input {
  width: 24rpx;
  height: 24rpx;
  border-radius: 6rpx;
  border: 2rpx solid #999999;
  background-color: transparent !important;
}

.checkbox .uni-checkbox-wrapper .uni-checkbox-input svg {
  color: #FF6B35 !important;
}

.agreement-text {
  font-size: 24rpx;
  color: #666666;
}

.agreement-desc {
  font-size: 24rpx;
  color: #999999;
}

.link {
  color: #FF6B35;
}

/* 弹出层样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: flex-end;
  animation: fadeIn 0.3s ease;
}

.popup-mask.hide {
  animation: fadeOut 0.3s ease;
}

.popup-content {
  background-color: #FFFFFF;
  border-radius: 30rpx 30rpx 0 0;
  padding: 40rpx;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  box-shadow: 0 -10rpx 10rpx rgba(255, 107, 90, 0.1), inset 0 40rpx 20rpx rgba(255, 107, 40, 0.1);
  animation: slideUp 0.3s ease;
}

.popup-content.hide {
  animation: slideDown 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

.popup-close {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 40rpx;
  color: #999999;
  cursor: pointer;
}

.popup-tips {
  color: #888888;
  text-align: center;
  padding: 36rpx 0;
  font-size: 30rpx
}

.tips {
  font-size: 26rpx
}

.popup-title {
  font-size: 32rpx;
  color: #333333;
  text-align: center;
  font-weight: 700;
  /* margin-bottom: 40rpx; */
}

.popup-input-box {
  background-color: #F5F5F5;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup-input {
  flex: 1;
  height: 60rpx;
  font-size: 30rpx;
  text-align: center;
}

.countdown {
  font-size: 28rpx;
  color: #FF6B35;
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-left: 2rpx solid #E5E5E5;
}

.popup-btns {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.popup-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.popup-btn.cancel {
  background-color: #F5F5F5;
  color: #666666;
}

.popup-btn.confirm {
  background-color: #FF6B35;
  color: #FFFFFF;
}

.wx-tips {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10rpx 0 30rpx;
  font-size: 28rpx
}
</style>
